<!--
 * @Author: 梁卓
 * @Date: 2022-02-25 10:15:26
 * @LastEditTime: 2022-03-10 11:36:39
 * @LastEditors: Please set LastEditors
 * @Description: 历次测试
 * @FilePath: \dreamUi\src\componets\echarts\StudentScoreAvage.vue
-->
<template>
  <div class="scoreAvage_page">
    <div style="width: 100%; height: 100%" ref="scoreAvage_echarts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "StudentScoreAvage",

  data() {
    return {
      chart: null,
    };
  },

  mounted() {
    this.getInfo();
    window.addEventListener("resize", this.chart);
  },
  destroyed() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    getInfo() {
      this.$ajax.get("/scoreInfo/getLastExamScore").then((res) => {
        console.log('tag', res)
        const scoreArr = res.data.data;
        let sum = 0;
        scoreArr.forEach((item) => {
          sum += item;
        });
        const max = Math.max.apply(Math, scoreArr);
        const min = Math.min.apply(Math, scoreArr);
        this.myEcharts(max, min, sum / scoreArr.length);
      });
    },
    myEcharts(max, min, avg) {
      this.chart = echarts.init(this.$refs.scoreAvage_echarts);
      const size = this.$refs.scoreAvage_echarts.offsetWidth;
      //配置图表
      this.chart.setOption({
        title: {
          text: "最新一次考试的分数",
          textStyle: {
            fontSize: size / 30
          }
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(255,255,255,0.7)',
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          x: "center",
          data: ["本次测验"],
        },
        toolbox: {
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["最高分", "最低分", "平均分"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "本次测验",
            type: "bar",
            itemStyle: {
              normal: {
  　　　　　　　　//这里是重点
                  color: function(params) {
                      var colorList = ['#3A5FCD','#436EEEF', '#436EEEF'];
                      return colorList[params.dataIndex]
                  }
              }
            },
            label: {
    		      show: true, //开启显示
    		      position: 'top', //在上方显示
    		      textStyle: { //数值样式
    		        color: 'black',
    			      fontSize: size / 40,
    		      	fontWeight: 1000
    			    }
    		    },
            data: [max, min, avg],
          },
        ]
      });
      this.chart.resize();
    },
  },
};
</script>

<style lang="scss" scoped></style>
